<template>
  <v-touch v-on:panup="up" v-on:pandown="down" class="v-touch">
    <div v-if="alllist" class="body">
      <div class="head">
        <van-nav-bar
          :title="alllist.name"
          @click-left="onClickLeft"
          @click-right="onClickRight"
        >
          <template #left>
            <van-icon name="arrow-left" size="24px" color="rgb(87,87,87)" />
          </template>

          <template #right>
            <van-icon
              name="share-o"
              color="rgb(87,87,87)"
              size="24px"
              style="margin-right: 35%"
            />
          </template>
        </van-nav-bar>
      </div>

      <div class="middle">
        <div class="top">
          <div class="left">
            <img :src="alllist.pic" alt="" />
          </div>
          <div class="right">
            <div class="right_top">
              <img
                :src="alllist.uploadUserImg"
                alt=""
                class="smallhead"
                v-if="alllist.uploadUserImg"
              />
              <p>{{ alllist.uploadUserName }}</p>
              <van-icon name="arrow" v-if="alllist.uploadUserImg" />
            </div>
            <div class="right_bottom">
              <p>{{ alllist.listenNum }}次收听</p>
              <p>分类：{{ alllist.categoryName }}</p>
            </div>
          </div>
        </div>

        <div class="botoom">
          <van-button
            v-if="type"
            class="btu1"
            type="danger"
            @click="quxiao"
            color="rgb(249,78,78)"
            >已收藏</van-button
          >
          <van-button
            @click="shoucang"
            class="btu1"
            v-else
            type="danger"
            color="rgb(249,78,78)"
            >收藏{{ alllist.followedNum }}</van-button
          >
          <van-button
            class="btu2"
            plain
            type="info"
            color="rgb(249,78,78)"
            icon="down"
            >批量下载
          </van-button>
        </div>
      </div>

      <div class="detail">
        <div>
          <van-tabs v-model="active">
            <van-tab title="详情">
              <div class="text van-multi-ellipsis--l3">
                <p>
                  {{ alllist.radioDesc }}
                </p>
              </div>

              <div class="person">
                <h2>主播</h2>
                <div class="per_botoom">
                  <div class="head_left">
                    <img
                      :src="alllist.uploadUserImg"
                      alt=""
                      v-if="alllist.uploadUserImg"
                    />
                  </div>
                  <div class="head_middle">
                    <h3>{{ alllist.uploadUserName }}</h3>
                    <p class="van-multi-ellipsis--l2">
                      {{ alllist.uploadUserIntro }}
                    </p>
                  </div>
                  <div class="per_end" v-show="alllist.uploadUserName">
                    <van-icon name="friends-o" />
                  </div>
                </div>
              </div>

              <div class="gjc">
                <h2>关键词</h2>
                <div class="tagbox">
                  <a class="tag" v-for="(n, m) in alllist.keyWords" :key="m" @click="gotosearch(n)">
                    {{ n }}
                  </a>
                </div>
              </div>

              <div class="pinglun">
                <h2>评论</h2>

                <div class="userpl" v-for="(v, b) in pllist" :key="b">
                  <div class="userhead">
                    <img src="@/assets/images/Pikachu.jpg" alt="" />
                  </div>

                  <div class="pl_middle">
                    <span>{{ v.username }}:{{ v.pl }}</span>
                    <p class="time">{{ v.time | dateFormat }}</p>
                  </div>
                </div>

                <div class="pl_end" style="display: flex">
                  <div class="logo">
                    <img src="@/assets/images/Pikachu.jpg" alt="" />
                    <input
                      ref="neirong"
                      type="text"
                      placeholder="快来说说你的感受吧.."
                      class="put"
                    />
                    <div class="push" @click="addpl">
                      <van-button class="tosubmit" plain type="primary"
                        >提交</van-button
                      >
                    </div>
                  </div>
                </div>
              </div>

              <div
                style="
                  margin-top: 150px;
                  background: rgb(245, 245, 245);
                  color: #fff;
                "
              >
                已经到底啦
              </div>
            </van-tab>
            <!----------------->
            <van-tab title="节目">
              <div class="playlist">
                <div class="listhead">
                  <h2>共{{ this.allcount }}期</h2>
                  <van-icon name="descending" size="24px" @click="paixu" />
                </div>
                <van-list
                  v-model="loading"
                  :finished="finished"
                  finished-text="没有更多了"
                  @load="onLoad"
                >
                  <van-cell
                    v-for="(g, h) in videolist"
                    :key="h"
                    @click="chang(g.albumId, h)"
                  >
                    <div class="play_top">
                      <p style="flex: 1">第{{ g.orderNum }}期:</p>
                      <p style="flex: 3" class="van-ellipsis">
                        {{ g.audioName }}
                      </p>
                    </div>
                    <div class="play_botom">
                      <div class="listnum">
                        <van-icon name="audio" />
                        <span class="listenNum">{{ g.listenNum }}</span>
                      </div>
                      <div class="dianzan">
                        <van-icon name="good-job-o" />
                        <span>{{ g.likedNum }}</span>
                      </div>
                      <span class="playdata">{{ g.updateTime }}</span>
                    </div>
                  </van-cell>
                </van-list>
              </div>
            </van-tab>
            <van-tab title="相似">
              <van-empty description="无相似推荐，看看其它内容吧。" />
            </van-tab>
          </van-tabs>
        </div>
      </div>
      <myvideo
        :listenlist="listenlist"
        :flag="flag"
        :kid="kid"
        :i="i"
      ></myvideo>
    </div>
  </v-touch>
</template>

<script>
import myvideo from "../../components/myvideo.vue";
import { Toast } from "vant";
import { commonMixin } from "@/utils";
export default {
  components: { myvideo },
  data() {
    return {
      id: 0,
      albumid: 0,
      alllist: [],
      active: 1,
      mixins: [commonMixin], //混入
      listenlist: [],
      flag: true,
      videolist: [],
      loading: false,
      finished: false,
      allcount: 0,
      pageSize: 10,
      n: 0,
      dx: false,
      qid: 0,
      length: 0,
      kid: 0,
      i: 0,
      dataReport: "",
      type: false,
      pllist: [],
    };
  },

  methods: {
    gotosearch(value){
      this.$router.push({name:"sousuo",query:JSON.stringify(value)})
      console.log(value)
    }
    ,
    addpl() {
      console.log(this.$refs.neirong.value);
      if (this.$refs.neirong.value != "") {
        this.$ajax
          .FMaddpl({
            id: this.$route.query.id,
            albumid: this.$route.query.albumid,
            username: localStorage.getItem("username"),
            pl: this.$refs.neirong.value,
            time: new Date(),
          })
          .then((res) => {
            if (res.type == 1) {
              Toast("评论成功");
              this.$ajax //查询收藏
                .FMfindallpl({
                  id: this.$route.query.id,
                  albumid: this.$route.query.albumid,
                  username: localStorage.getItem("username"),
                })
                .then((res) => {
                  if (res.data != null) {
                    this.pllist = res.data;
                  }
                });
            }else{
              Toast("未登录或登录失效，请重新登录");
            }
          });
      } else {
        Toast("评论不能为空哦");
      }
    },

    quxiao() {
      this.$ajax
        .Fmdelsc({
          id: this.$route.query.id,
          albumid: this.$route.query.albumid,
          username: localStorage.getItem("username"),
        })
        .then((res) => {
          if (res.type == 1) {
            Toast("取消收藏成功");
            this.type = false;
          } else {
            Toast("未登录或登录已失效，请重新登录");
          }
        });
    },
    shoucang() {
      let id = this.$route.query.id;
      let albumid = this.$route.query.albumid;
      let username = localStorage.getItem("username");
      this.$ajax
        .Fmshoucang({
          id: id,
          albumid: albumid,
          username: username,
        })
        .then((res) => {
          if (res.type == 1) {
            Toast("收藏成功");
            this.type = true;
          } else {
            Toast("未登录或登录已失效，请重新登录");
          }
        });
    },
    onClickLeft() {
      this.$router.push({name:"index"});
    },
    onClickRight() {},
    up() {
      this.flag = false;
    },
    down() {
      this.flag = true;
    },
    paixu() {
      this.videolist.reverse();
      this.dx = true;
    },
    chang(value, i) {
      this.kid = value;
      this.i = i;
    },
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求\
      // setTimeout(() => {
      this.n++;
      this.pageSize += 10;
      let allpagenum = Math.ceil(this.allcount / 10);

      if (this.albumid > 0) {
        this.$ajax
          .getjiemu({
            installid: "0004de6o",
            appid: "0",
            operator: "2",
            playid: "BE8C16124A0D4564A2D647D1F6B861F3",
            suppermode: "0",
            devicetype: "1",
            devicename: "Unknown iPhone",
            lon: "114.422956",
            channel: "appstore",
            action: "466",
            pagesize: this.pageSize,
            sorttype: "1",
            resolution: "750*1624",
            pagenum: "1",
            version: "5.3.4",
            udid: "1dd9a71d07d7445b22a52fc5e3191fd1",
            usertype: 0,
            sign: "1b881e03776150f8f1d54e594cc8f6a0",
            id: this.albumid,
            mac: "020000000000",
            timestamp: "1609985172",
            sessionid: "4853CDC28AAF4136ACFD9F98A86FD6E5",
            timezone: "28800",
            network: 1,
            osversion: "14.0.1",
            lat: "30.460359",
            idfv: "01D797A6-80F3-4C9F-8183-9FB3F11DCC9E",
            page: "200003",
            producer: "apple",
            screensize: "375*812",
            idfa: "0E03CA4F-EC5F-4E29-9DAC-26D332D07B91",
          })
          .then((res) => {
            if (res.result != null) {
              this.length = res.result.length;
              this.loading = false;

              if (this.dx == false) {
                this.videolist = res.result.dataList;
              } else {
                this.videolist = res.result.dataList;
                this.length = res.result.length;
                this.videolist.reverse();
              }
            } else {
              console.log("服务器异常");
            }
          });
      } else {
        this.$ajax
          .getjiemu({
            installid: "0004de6o",
            appid: "0",
            operator: "2",
            playid: "BE8C16124A0D4564A2D647D1F6B861F3",
            suppermode: "0",
            devicetype: "1",
            devicename: "Unknown iPhone",
            lon: "114.422956",
            channel: "appstore",
            action: "466",
            pagesize: this.pageSize,
            sorttype: "1",
            resolution: "750*1624",
            pagenum: 1,
            version: "5.3.4",
            udid: "1dd9a71d07d7445b22a52fc5e3191fd1",
            usertype: 0,
            sign: "1b881e03776150f8f1d54e594cc8f6a0",
            id: this.id,
            mac: "020000000000",
            timestamp: "1609985172",
            sessionid: "4853CDC28AAF4136ACFD9F98A86FD6E5",
            timezone: "28800",
            network: 1,
            osversion: "14.0.1",
            lat: "30.460359",
            idfv: "01D797A6-80F3-4C9F-8183-9FB3F11DCC9E",
            page: "200003",
            producer: "apple",
            screensize: "375*812",
            idfa: "0E03CA4F-EC5F-4E29-9DAC-26D332D07B91",
          })
          .then((res) => {
            if (res.result != null) {
              this.length = res.result.length;
              this.loading = false;
              if (this.dx == false) {
                this.videolist = res.result.dataList;
              } else {
                this.videolist = res.result.dataList;
                this.videolist.reverse();
              }
            }
          });
      }
      // console.log(this.videolist.length,this.allcount)
      if (this.videolist.length > 0 || this.allcount > 0) {
        if (this.videolist.length >= this.allcount) {
          this.finished = true;
        }
      }

      // }, 1000);
    },
  },
  mounted() {
    //节目列表通过id查询
    this.id = this.$route.query.id;
    this.albumid = this.$route.query.albumid;
    this.dataReport = this.$route.query.dataReport;
    console.log(this.dataReport);
    if (this.albumid > 0) {
      this.$ajax
        .getjiemu({
          installid: "0004de6o",
          appid: "0",
          operator: "2",
          playid: "BE8C16124A0D4564A2D647D1F6B861F3",
          suppermode: "0",
          devicetype: "1",
          devicename: "Unknown iPhone",
          lon: "114.422956",
          channel: "appstore",
          action: "466",
          pagesize: "10",
          sorttype: "1",
          resolution: "750*1624",
          pagenum: "1",
          version: "5.3.4",
          udid: "1dd9a71d07d7445b22a52fc5e3191fd1",
          usertype: 0,
          sign: "1b881e03776150f8f1d54e594cc8f6a0",
          id: this.albumid,
          mac: "020000000000",
          timestamp: "1609985172",
          sessionid: "4853CDC28AAF4136ACFD9F98A86FD6E5",
          timezone: "28800",
          network: 1,
          osversion: "14.0.1",
          lat: "30.460359",
          idfv: "01D797A6-80F3-4C9F-8183-9FB3F11DCC9E",
          page: "200003",
          producer: "apple",
          screensize: "375*812",
          idfa: "0E03CA4F-EC5F-4E29-9DAC-26D332D07B91",
        })
        .then((res) => {
          if (res.result) {
            this.videolist = res.result.dataList;
          } else {
            Toast("暂时没有数据哦，看看别的吧~");
            this.$router.push({ name: "sousuo" });
          }
        });
    } else {
      this.$ajax
        .getjiemu({
          installid: "0004de6o",
          appid: "0",
          operator: "2",
          playid: "BE8C16124A0D4564A2D647D1F6B861F3",
          suppermode: "0",
          devicetype: "1",
          devicename: "Unknown iPhone",
          lon: "114.422956",
          channel: "appstore",
          action: "466",
          pagesize: "10",
          sorttype: "1",
          resolution: "750*1624",
          pagenum: "1",
          version: "5.3.4",
          udid: "1dd9a71d07d7445b22a52fc5e3191fd1",
          usertype: 0,
          sign: "1b881e03776150f8f1d54e594cc8f6a0",
          id: this.id,
          mac: "020000000000",
          timestamp: "1609985172",
          sessionid: "4853CDC28AAF4136ACFD9F98A86FD6E5",
          timezone: "28800",
          network: 1,
          osversion: "14.0.1",
          lat: "30.460359",
          idfv: "01D797A6-80F3-4C9F-8183-9FB3F11DCC9E",
          page: "200003",
          producer: "apple",
          screensize: "375*812",
          idfa: "0E03CA4F-EC5F-4E29-9DAC-26D332D07B91",
        })
        .then((res) => {
          if (res.result != null) {
            this.videolist = res.result.dataList;
          } else {
            Toast("暂时没有数据哦，看看别的吧~");
            this.$router.push({ name: "sousuo" });
          }
        });
    }

    if (this.albumid > 0) {
      this.$ajax
        .getxiangqing({
          //详情list  通过albumid查询
          installid: "0004de6o",
          appid: "0",
          operator: "2",
          playid: "BE8C16124A0D4564A2D647D1F6B861F3",
          suppermode: "0",
          devicetype: "1",
          devicename: "Unknown iPhone",
          lon: "114.422956",
          channel: "appstore",
          action: "466",
          pagesize: "10",
          sorttype: "1",
          resolution: "750*1624",
          pagenum: "1",
          version: "5.3.4",
          udid: "1dd9a71d07d7445b22a52fc5e3191fd1",
          usertype: 0,
          sign: "1b881e03776150f8f1d54e594cc8f6a0",
          albumid: this.albumid,
          mac: "020000000000",
          timestamp: "1609985172",
          sessionid: "4853CDC28AAF4136ACFD9F98A86FD6E5",
          timezone: "28800",
          network: 1,
          osversion: "14.0.1",
          lat: "30.460359",
          idfv: "01D797A6-80F3-4C9F-8183-9FB3F11DCC9E",
          page: "200003",
          producer: "apple",
          screensize: "375*812",
          idfa: "0E03CA4F-EC5F-4E29-9DAC-26D332D07B91",
        })
        .then((res) => {
          this.$nextTick(() => {
            this.alllist = res.result;
            if (res.result) {
              this.allcount = res.result.countNum;
            }
          });
        });
    } else {
      this.$ajax
        .getxiangqing({
          //详情list  通过id查询
          installid: "0004de6o",
          appid: "0",
          operator: "2",
          playid: "BE8C16124A0D4564A2D647D1F6B861F3",
          suppermode: "0",
          devicetype: "1",
          devicename: "Unknown iPhone",
          lon: "114.422956",
          channel: "appstore",
          action: "466",
          pagesize: "10",
          sorttype: "1",
          resolution: "750*1624",
          pagenum: "1",
          version: "5.3.4",
          udid: "1dd9a71d07d7445b22a52fc5e3191fd1",
          usertype: 0,
          sign: "1b881e03776150f8f1d54e594cc8f6a0",
          albumid: this.id,
          mac: "020000000000",
          timestamp: "1609985172",
          sessionid: "4853CDC28AAF4136ACFD9F98A86FD6E5",
          timezone: "28800",
          network: 1,
          osversion: "14.0.1",
          lat: "30.460359",
          idfv: "01D797A6-80F3-4C9F-8183-9FB3F11DCC9E",
          page: "200003",
          producer: "apple",
          screensize: "375*812",
          idfa: "0E03CA4F-EC5F-4E29-9DAC-26D332D07B91",
        })
        .then((res) => {
          this.$nextTick(() => {
            this.alllist = res.result;
            if (res.result) {
              this.allcount = res.result.countNum;
              console.log(this.allcount);
            }
          });
        });
    }

    this.$ajax //查询收藏
      .Fmfindone({
        id: this.$route.query.id,
        albumid: this.$route.query.albumid,
        username: localStorage.getItem("username"),
      })
      .then((res) => {
        if (res.type == 0) {
          this.type = false;
        } else {
          this.type = true;
        }
      });

    this.$router.afterEach((to, from, next) => {
      window.scrollTo(0, 0);
    });

    this.$ajax //查询收藏
      .FMfindallpl({
        id: this.$route.query.id,
        albumid: this.$route.query.albumid,
        username: localStorage.getItem("username"),
      })
      .then((res) => {
        if (res.data != null) {
          this.pllist = res.data;
        }
      });

    this.$router.afterEach((to, from, next) => {
      window.scrollTo(0, 0);
    });
  },
};
</script>

<style scoped lang="scss">
.van-icon-arrow-left {
  font-size: "30px";
}
.head {
  border-bottom: 1px solid rgb(206, 206, 206);
}

::v-deep .van-nav-bar__title van-ellipsis {
  font-size: 16px;
  font-weight: 400;
  color: rgb(87, 87, 87);
}

::v-deep .van-nav-bar__right {
  padding-right: 10%;
}

.botoom {
  display: flex;
}

.top {
  display: flex;
  .left {
    width: 30%;
    img {
      width: 100%;
      border-radius: 3px;
    }
  }
}
.right {
  margin-left: 20px;
  text-align: left;
}

.right_top {
  display: flex;
  font-size: 12px;
  align-items: center;
}

.smallhead {
  width: 30px;
  height: 30px;
  margin-right: 10px;
  border: 1px solid #888;
  border-radius: 50%;
}

.middle {
  background-color: #fff;
  padding: 20px;
}

.right_bottom {
  font-size: 14px;
  p {
    margin: 10px 0 10px 0;
  }
}

.botoom {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
  .btu1,
  .btu2 {
    width: 46%;
  }
}
::v-deep .van-icon-down {
  font-size: 22px;
}
::v-deep .van-nav-bar__content {
  background-color: rgb(248, 247, 247);
}

.detail {
  margin-top: 10px;
}
::v-deep .van-tabs__wrap {
  border-bottom: 1px solid rgb(243, 243, 243);
}

.text {
  padding: 20px;
  background-color: #fff;
  text-align: left;
  font-size: 13px;
}

.per_botoom {
  display: flex;
  align-items: center;
}

.head_left {
  img {
    @extend .smallhead;
    width: 40px;
    height: 40px;
  }
}
.person {
  background-color: #fff;
  margin: 10px 0 10px 0;
  text-align: left;
  padding: 10px;
  position: relative;
  h2 {
    font-size: 13px;
    font-weight: 600;
    line-height: 40px;
  }
}
.head_middle {
  margin-left: 10px;
  line-height: 20px;
  width: 60%;
  h3 {
    font-size: 14px;
  }
  p {
    font-size: 12px;
    color: rgb(157, 157, 157);
  }
}
.per_end {
  font-size: 26px;
  position: absolute;
  right: 15%;
  color: rgb(249, 78, 78);
}

.gjc {
  @extend .person;
  h2 {
    font-size: 13px;
    font-weight: 600;
    line-height: 40px;
  }
  .tag {
    line-height: 14px;
    color: rgb(77, 216, 194);
    padding: 5px 10px;
    border: 1px solid rgb(77, 216, 194);
    border-radius: 8px;
    font-size: 13px;
    margin-top: 5px;
    margin-left: 3%;
  }
}

.tagbox {
  width: 90%;
  display: flex;
  // justify-content: space-between;
  flex-wrap: wrap;

  text-align: left;
}
.pinglun {
  @extend .person;

  h2 {
    font-size: 13px;
    font-weight: 600;
    line-height: 40px;
  }
  .put {
    text-align: center;
    height: 24px;
    display: block;
    border: none;
    border-radius: 5px;
    background-color: rgb(245, 245, 245);
    font-size: 14px;
    line-height: 24px;
    margin-left: 20px;
    padding: 0 20px;
  }
  .logo {
    width: 30px;
    height: 30px;
    align-items: center;
    display: flex;
    img {
      width: 100%;
      height: 100%;
      border: 1px solid rgb(245, 245, 245);
      border-radius: 50%;
    }
  }
}
.pl_end {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.v-touch {
  touch-action: pan-y !important;
}

.playlist {
  margin-top: 10px;
}

.listhead {
  padding: 10px 15px;
  display: flex;
  background-color: #fff;
  font-size: 13px;
  color: rgb(146, 146, 146);
  font-weight: 600 !important;
  line-height: 30px;
  align-items: center;
  justify-content: space-between;
}

.play_botom {
  display: flex;
  margin-top: 6px;
  color: rgb(162, 162, 162);
  align-items: center;
}
.listnum {
  display: flex;
  align-items: center;
}
.dianzan {
  display: flex;
  margin-left: 5%;
  align-items: center;
  span {
    margin-left: 20%;
  }
}
.playdata {
  margin-left: 40%;
  flex: 1;
}

.listenNum {
  margin-left: 20%;
  flex: 1;
}
.play_top {
  display: flex;
  flex: 3;
}
.body {
  overflow: hidden;
}
.tosubmit {
  width: 65px !important;
  margin-left: 20% !important;
  height: 24px !important;
}

.userpl {
  display: flex;
  align-content: center;
  margin-top: 20px;
}
.pl_middle {
  display: flex;
  width: 100px;
  margin-left: 5px;
  flex: 10;
  align-items: center;
  font-size: 14px;
  span {
    flex-wrap: nowrap;
    margin-left: 5px;

  }
  .all_pl {
    width: 200px;
    display: block;
  }
}

.userhead {
  width: 0.8rem;
  height: 0.8rem;
  flex: 1;
  img {
    width: 100%;
    height: 100%;
  }
}

.time {
  margin-left: 20px;
}
</style>